<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix" style="text-align: center">
            <span>请假管理</span>
          </div>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column align="center" min-width="140" label="申请时间">
              <template slot-scope="scope">{{
                scope.row.createtime | date
              }}</template>
            </el-table-column>
            <el-table-column align="center" prop="username" label="申请人">
              <!--<template slot-scope="scope">{{ scope.row.u_id | username}}</template>-->
            </el-table-column>
            <el-table-column align="center" prop="leavetype" label="类型">
            </el-table-column>
            <el-table-column align="center" prop="classes" label="班级">
            </el-table-column>
            <el-table-column align="center" prop="state" label="审核结果">
              <template slot-scope="scope">
                <el-tag :type="scope.row.state | type">{{
                  scope.row.state | state
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  style=""
                  type="danger"
                  @click="check(scope.$index, scope.row)"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog title="假条审批" :visible.sync="dialogVisible" width="500px">
      <ElForm>
        <ElFormItem label="学号："
          ><ElTag type="">{{ dialog.id }}</ElTag></ElFormItem
        >
        <ElFormItem label="姓名："
          ><el-tag type="danger">{{ dialog.username }}</el-tag></ElFormItem
        >
        <ElFormItem label="所在班级：">{{ dialog.classes }}</ElFormItem>
        <ElFormItem label="请假类型："
          ><el-tag type="info">{{ dialog.leavetype }}</el-tag></ElFormItem
        >
        <ElFormItem label="请假原因：">{{ dialog.reason }}</ElFormItem>
        <ElFormItem label="请假时间："
          >{{ dialog.starttime | date }} 至
          {{ dialog.endtime | date }}</ElFormItem
        >
        <ElFormItem label="申请时间：">{{
          dialog.createtime | date
        }}</ElFormItem>
      </ElForm>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="approve(1)">拒绝</el-button>
        <el-button type="success" @click="approve(2)">批准</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
  data () {
    return {

      tableData: [],
      dialogVisible: false,
      dialog: ''
    }
  },
  created () {
    this.getapplication(this.pageNo, this.pageSize)
  },
  filters: {
    date (time) {
      return dayjs(time).format('YYYY-MM-DD HH-mm')
    },
    state (type) {
      if (type == 0) {
        return '未审批'
      }
      if (type == 1) {
        return '不通过'
      }
      if (type == 2) {
        return '通过'
      }
    },

    type (type) {
      if (type == 0) {
        return ''
      }
      if (type == 1) {
        return 'danger'
      }
      if (type == 2) {
        return 'success'
      }
    }
  },
  methods: {
    async approve (state) {
      const { data: result } = await this.$Axios.get('admin/setLeaveState', {
        params: {
          l_id: this.dialog.l_id,
          state,
        }
      })
      if (result.code) {
        this.$message.success('审批成功')
      } else {
        this.$message.error('修改失败')
      }
      this.dialogVisible = false
      this.getapplication()
    },

    check (index, row) {
      this.dialogVisible = true
      this.dialog = row

    },

    async getapplication () {
      const { data: result } = await this.$Axios.get('teacher/getClassLeave')
      if (result.code) {
        this.tableData = result.data
      }
    },


    //分页
    handleSizeChange (val) {
      this.pageSize = val;
      this.getapplication(this.pageNo, this.pageSize)
    },
    handleCurrentChange (val) {
      this.pageNo = val;
      this.getapplication(this.pageNo, this.pageSize)
    }
  },
}
</script>

<style scoped lang="scss">
</style>
